function main() {
    // ol.album-list: 找到 class 属性是 album-list 的 ol 标签
    var olElement = document.querySelector("ol.album-list")

    header()

    function onResult(result) {
        if (!result.success) {
            alert(result.reason)
            return
        }

        var albumList = result.data
        // 遍历专辑列表
        for (var album of albumList) {
            // 针对每个专辑创建 html
            // var html = "<li>" + album.name + "</li>";
            // JS 中的模板字符串，使用反引号(键盘上波浪线的按键) `
            //var html = `<li>${album.name}</li>`
            var html = `<li>
        <a href="/album-detail.html?aid=${album.aid}">
          <img src="${album.cover}">
          <h2>${album.name}</h2>
          <p>共播放 ${album.count} 次</p>
        </a>
      </li>`

            olElement.innerHTML += html
        }
    }

    // 先从 url 中的 query string 部分，获取 keyword 参数
    var keyword = getParameter("keyword")

    // 拉取专辑列表页
    if (keyword) {
        // 为了使得中文可以正常传输，我们把 keyword 做 url 编码
        var url = "/api/album-list.json?keyword=" + encodeURIComponent(keyword)
    } else {
        var url = "/api/album-list.json"
    }
    ajax("get", url, onResult)
}

// window 的 load 事件发生时，执行 main 方法
// 浏览器把所有的资源都加载到位时，window 的 load 事件就会发生
// 白话：当浏览器把所有的资源都加载到位时，再去执行我们的 main 函数
window.addEventListener("load", main)